<template>
	<view class="carddetail-container">
		<view class="title">
			<image class="title-image" v-if="props.itemData.status == props.itemData.currStatus"
				:src="`/static/${props.itemData.iconActiveName}.png`"></image>
			<image class="title-image" v-else :src="`/static/${props.itemData.iconName}.png`"></image>
			<view class="title-title">
				{{ props.itemData.name }}
			</view>
		</view>
		<view class="detail-info" :class="props.itemData.name != '结束' ? 'detail-info-box' : ''">
			<view v-if="props.itemData.date">时间：{{ props.itemData.date }}</view>
			<view class="image-box" v-if="props.itemData.img">
				<image class="warn-image" v-for="(item, index) in props.itemData.img" :key="index" :src="replaceUrl(item)" @tap="fd"></image>
			</view>
			<!-- <view v-if="props.itemData.department">处置部门：{{ props.itemData.department }}</view> -->
			<view v-if="props.itemData.opinion">意见反馈：{{ props.itemData.opinion }}</view>
		</view>
		<view class="fangda-block" v-if="fdflag">
			<view class="closefd" @tap="closefd">+</view>
			<swiper :indicator-dots="true" indicator-active-color="rgba(89,112,250,0.5)" style="height: 100%;">
				<swiper-item v-for="(item, index) in props.itemData.img" :key="index">
					<movable-area>
						<movable-view direction="all" out-of-bounds="true" scale="true" class="fangda">
							<image class="fangdaimg" :src="replaceUrl(item)"></image>
						</movable-view>
					</movable-area>
				</swiper-item>
			</swiper>
		</view>
	</view>
</template>

<script setup>
import { ref } from 'vue'
const props = defineProps({
	itemData: {
		type: Object,
		default: {}
	},
})
const fdflag = ref(false);
const fd = ()=>{
	fdflag.value = true;
}
const closefd=()=>{
	fdflag.value=false
}
const replaceUrl=(url)=> {
  return url.replace('172.17.204.2:8888','60.209.108.66:8888')
}
</script>

<style lang="scss" scoped>
.closefd {
	position: absolute;
	top: -60rpx;
	right: 20rpx;
	font-size: 50rpx;
	transform: rotate(45deg);
	color: white;
	width: 50rpx;
	height: 50rpx;
	border-radius: 50%;
	border: 2rpx solid white;
	display: flex;
	align-items: center;
	justify-content: center;
}
.fangda-block {
	position: absolute;
	width: 750rpx;
	height: 420rpx;
	top: 320rpx;
	left: 0;
	&:before {
		content: '';
		position: absolute;
		z-index: 0;
		width: 100vw;
		height: 100vh;
		left: 0;
		top: -370rpx;
		background: rgba(0,0,0,0.3);
	}
}
.fangda {
	width: 750rpx;
	height: 420rpx;
}
.fangdaimg {
	width: 100%;
	height: 100%;
}
.carddetail-container {
	background: #FFFFFF;
	padding: 0 45rpx 0 23rpx;
	// padding: 34rpx 45rpx 34rpx 23rpx;
}

.title {
	display: flex;
	align-items: center;
	// border: 1px solid red;

	.title-image {
		width: 36rpx;
		height: 36rpx;
		margin-right: 20rpx;
		margin-top: -3rpx;
	}

	.title-title {
		font-size: 30rpx;
		font-weight: bold;
		margin-right: 24rpx;
	}

}

.detail-info-box {
	border-left: 4rpx solid #DADEF9;
}

.detail-info {
	// border: 1px solid red;

	margin-left: 16rpx;
	margin-top: -4rpx;
	// margin-bottom: -1rpx;
	padding: 30rpx;

	font-size: 26rpx;
	font-family: Source Han Sans CN;
	font-weight: 400;
	color: #B8BDC3;
	line-height: 50rpx;

	.warn-image {
		margin-top: 20rpx;
		width: 428rpx;
		height: 240rpx;
	}
}
</style>
